<template>
    <div style="background-color: #ececec; padding: 20px">
        <a-row :gutter="16">
            <a-col v-for="product in computedProductData" style="margin-top: 10px">
                <a-card hoverable style="width: 240px;">
                    <template #cover>
                        <a-image :src="product.skuImg" alt="img" style="max-height: 150px" />
                    </template>
                    <template #actions>
                        <ellipsis-outlined key="ellipsis" @click="openProductDetails(product.skuId)" />
                    </template>
                    <a-card-meta style="text-align: left">
                        <template #title>
                            ￥{{ product.skuPrice }}
                        </template>
                        <!--                        <template #avatar>-->
                        <!--                            <a-avatar src="https://joeschmoe.io/api/v1/random" />-->
                        <!--                        </template>-->
                        <template #description>
                            <div v-html="product.skuTitle">
                            </div>
                        </template>
                    </a-card-meta>
                </a-card>
            </a-col>
        </a-row>
        <!--商品详情-->
        <ProductDetailsView v-if="productDetailsProps.skuId>=0" :key="productDetailsProps.skuId"
                                 v-model:props="productDetailsProps"
        ></ProductDetailsView>
    </div>
</template>

<script lang="ts" setup>
import { EllipsisOutlined } from "@ant-design/icons-vue";
import { ProductDetailsProps, ProductSearchVo } from "@/model/SearchModel.ts";
import { computed, ref } from "vue";
import ProductDetailsView from "@/pages/search/product-details/ProductDetailsView.vue";
//默认属性配置
const props = defineProps<{ data: ProductSearchVo[] }>();
//计算商品详情配置
const productDetailsProps = ref<ProductDetailsProps>({
    isShowModal: false,
    skuId: -1,
});

//计算商品数据
const computedProductData = computed<ProductSearchVo["products"]>(() => {
    if (props.data.length === 0) {
        return [];
    }
    // console.table(props.data[0].products)
    return props.data[0].products;
});
/**
 * 打开商品详情
 * @param skuId 选中的商品id
 */
const openProductDetails = (skuId: number) => {
    productDetailsProps.value = {
        isShowModal: true,
        skuId: skuId,
    };
};
</script>

<style scoped>

</style>